<template>
  <div class="patrolTypes-root">
    <formTitleVue
      title="监测数据数量统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPie domId="monitorInfoManagement-monitorCount-echarts" height="40vh" :chartsData="chartsData" :myOption="echartsOption"/>
    <!-- <myPieRing domId="patrol-patrolTypes-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/> -->
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPie from '@/components/Echarts/myPie.vue';
import { time_select_optios } from '@/utils/global.js';
import { api_realHistoryPie } from '@/api/jcfx/jcsjtj.js'

export default {
  name: "patrolTypes",
  components: {
    formTitleVue,myPie,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            // { label: "近一月", value: "近一月" },
            // { label: "近半年", value: "近半年" },
            // { label: "近一年", value: "近一年" },
          ]
        }
      ],
      chartsData: {
        xData: ["市政设施", "房屋建筑", "交通设施", "人员密集区域"],
        yData: [],
      },
      echartsOption:{
        legend:{
          show:false,
        }
      },
      searChForm: {
        bModeType: '',
        areaCode: this.$store.state.account.user.deptIds,
      },
    };
  },
  methods: {
    selectChange(item) {
      // console.log(item);
      let time_select = time_select_optios[item]||{}
      this.searChForm.bModeType = item
      this.getData()
    },
    getData(){
      api_realHistoryPie(this.searChForm).then(res => {
        // console.log(res)
        let data = res.data
        let report = data.report
        this.chartsData.yData = report
        this.chartsData.yData.forEach(item => {
            item.labelLine = {
              normal:{
                show: true, //引导线
              }
            }
            item.label = {
              normal:{
                show: true,
                formatter:function(e){
                  let data=e.data;
                  if(data.value==0){
                    // 无数据时去掉引导线和文字
                    data.labelLine.show=false;
                    data.label.show=false;
                  }else{
                    return data.name
                  }
                },    
              }
            }
        })
      })

    },
    getDict(){
      // 获取字典值
      this.alarmBclassify_options = []
      this.$commonJs.filterDataDict("alarmBclassify", this.alarmBclassify_options)
      console.log(this.alarmBclassify_options)
      // 后台返回的字典没有value，需要手动添加
      this.alarmBclassify_options.forEach(item => {
        item.value = item.valueText
      })
      this.alarmBclassify_options.unshift({label: '全部', value: ''})
      this.selectOptions[0].selectValue = this.alarmBclassify_options[0].value
      this.selectOptions[0].options = this.alarmBclassify_options
    },
  },
  mounted() {
    this.getDict()
    this.selectChange(this.selectOptions[0].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.patrolTypes-root {
  #echarts-types {
    height: 30vh;
  }
}
</style>
